<template>
  <el-card>
    <template #header>评估列表</template>
    <el-table :data="items" style="width:100%">
      <el-table-column prop="activity_id" label="活动ID" />
      <el-table-column prop="version_no" label="版本" />
      <el-table-column prop="score_total" label="总分" />
      <el-table-column label="否决">
        <template #default="{ row }">
          <el-tag :type="row.verdict ? 'danger' : 'success'">{{ row.verdict ? '是' : '否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="{ row }">
          <el-button size="small" @click="compute(row.id)">计算总分</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-divider />
  <el-card>
    <template #header>新增评估（示例）</template>
    <el-form label-width="100px">
      <el-form-item label="活动ID"><el-input v-model="form.activity_id" /></el-form-item>
      <el-form-item label="版本号"><el-input v-model.number="form.version_no" /></el-form-item>
      <el-button type="primary" @click="create">创建</el-button>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '../../api/client'

type Evaluation = {
  id: string
  activity_id: string
  version_no: number
  score_total: number
  verdict: boolean
}

const items = ref<Evaluation[]>([])
const form = ref<Evaluation>({ id: '', activity_id: '', version_no: 1, score_total: 0, verdict: false })

async function load() {
  const { data } = await api.get('/evaluations')
  items.value = data
}

async function create() {
  await api.post('/evaluations', { ...form.value })
  await load()
}

async function compute(id: string) {
  await api.post(`/evaluations/${id}/compute-total`)
  await load()
}

onMounted(load)
</script>